<template>
  <div class='calendar-main'>
    <FullCalendar
      class='app-calendar'
      :options='getOptions'
    >
    </FullCalendar>
  </div>
</template>
<script >
import { getAction } from '@/api/manage'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import moment from 'moment'
// import timeGridPlugin from '@fullcalendar/timegrid'
// import interactionPlugin from '@fullcalendar/interaction'
export default {
  name: 'TaskCalendar',
  components: {
    FullCalendar
  },
  props: ['projectCode', 'hasPower'],
  data() {
    return {
      calendarOptions: {
        contentHeight: 600,
        plugins: [
          dayGridPlugin
          // timeGridPlugin,
          // interactionPlugin
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title'
          // right: 'dayGridMonth,timeGridWeek,timeGridDay'//
        },
        initialView: 'dayGridMonth',
        events: this.getEvents,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        datesSet: this.handleDatesRender,
        locale: 'zh-cn',
        firstDay: '1',
        weekNumberCalculation: 'ISO',
        eventLimit: true, // for all non-agenda views
        views: {
          agenda: {
            eventLimit: 2 // adjust to 6 only for agendaWeek/agendaDay
          }
        }
      },
      currentEvents: [],
      dataSource: [],
      startStr: '',
      endStr: ''
    }
  },
  computed: {
    getOptions() {
      const events = []
      this.dataSource.forEach(item => {
        const obj = {
          start: item.startTime,
          end: item.endTime,
          title: item.taskName,
          id: item.id,
          workTime: 1
        }
        if (item.taskStatus === '3') {
          obj.color = '#52c41a'
        } else if (item.taskStatus === '2') {
          obj.color = '#40a9ff'
        } else if (item.taskStatus === '1') {
          obj.color = '#fa8c16'
        } else {
          obj.color = '#f5222d'
        }
        events.push(obj)
      })
      this.calendarOptions.events = events
      return this.calendarOptions
    }
  },
  methods: {
    handleDatesRender(arg) {
      if (!arg.startStr || !arg.startStr) {
        return false
      }
      const startStr = moment(arg.startStr).format('YYYY-MM-DD')
      const endStr = moment(arg.endStr).format('YYYY-MM-DD')
      if (startStr !== this.startStr || endStr !== this.endStr) {
        this.startStr = startStr
        this.endStr = endStr
        this.loadData()
      }
    },
    handleDateSelect(selectInfo) {

    },
    handleEventClick(clickInfo) {
      const formData = this.dataSource.filter(item => clickInfo.event.id === item.id)[0]
      if (this.hasPower && formData.taskStatus !== '3') {
        if (formData.taskStatus === '2') {
          this.$emit('fn', 'check', formData)
        } else {
          this.$emit('fn', 'edit', formData)
        }
      } else {
        this.$emit('fn', 'detail', formData)
      }
    },
    handleEvents(events) {
      this.currentEvents = events
    },
    loadData() {
      getAction('/pms/task/list', {
        projectCode: this.projectCode,
        startTime_begin: this.startStr,
        startTime_end: this.endStr
      }).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>
<style >
.calendar-main .fc-scrollgrid-sync-table,
.calendar-main .fc-col-header,
.calendar-main .fc-daygrid-body {
  width: 100% !important;
}
</style>
<style  scoped>
.app-calendar{
  width: 100%;
}
.calendar-main{
  width: 100%;
}

</style>
